<template>
  <div class="wrap">
    <Topbar :key="topbarCount" v-if="!isAdmin"/>
    <Nav v-show="isShowNav" v-if="!isAdmin"/>
    <transition name="fade1">
      <router-view />
    </transition>
    <transition name="fade">
      <Toast v-show="isShowToast" class="toast"></Toast>
    </transition>
    <!-- 聊天窗口 -->
    <Chat v-if="isShowChat" class="chat-layer"/>
    <Backtop/>
  </div>
</template>
<script>
import Login from "./components/login.vue";
import Topbar from "./components/topbar.vue";
import Nav from "./components/navigation.vue"
import Toast from './components/toast.vue'
import Backtop from '@/components/backtop.vue'
import Chat from '@/components/chat.vue'
import { mapState } from "vuex";
export default {
  name: "App",
  components: {
    Login,
    Topbar,
    Nav,
    Toast,Chat,
    Backtop
  },
  computed: {
    ...mapState({
      isShowToast : state => state.toastStatus.isShowToast,
      topbarCount : state =>state.topbarStatus.topbarCount,
      isShowNav : state => state.navStatus.isShowNav,
      isShowChat:state =>state.chatStatus.isShowChat,
      adminLogined: state => state.admin.adminLogined
    })
  },
  data(){
    return{
      isAdmin:false
    }
  },
  methods:{
    
  },
  mounted(){
    this.$bus.$on('adminLogin', (state)=>{
      this.isAdmin = state;
    })
  }
};
</script>

<style>

.fade1-enter-active,
.fade1-leave-active {
  transition: opacity 0.3s;
}

.fade1-enter,
.fade1-leave-to {
  opacity: 0; 
}


.customWidth{
    width:500px;
}
* {
  margin: 0;
  padding: 0;
}
.toast{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
/* 过渡开始，结束开始 */
.fade-enter,.fade-leave-to{
  opacity: 0;
}
.fade-enter-active,.fade-leave-active{
  transition: opacity 0.5s;
}
/*  */
.fade-leave,.fade-enter-to{
  opacity: 1;
}
.left {
  float: left;
}
.right {
  float: right;
}
.clearfix::after {
  content: "";
  clear: both;
  display: block;
}
.container {
  width: 1200px;
  /* background-color: rgb(246,246,246); */
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 0;
  border: 1px solid #e3dede;
}
.chat-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999; /* 设置较高的z-index值，将Chat组件置于最顶层 */
}
</style>
